<template>
  <div class="page">
    <div class="backbo" :style="backImg" />
    <div class="head">
      <img
        class="logo"
        :src="logo"
      >
      <span class="title">融合用户播控平台</span>
      <div class="user" :style="background">
        <el-dropdown @visible-change="appear" @command="handleCommand">
          <span class="el-dropdown-link">
            <img class="userImg" :src="user">
            <i class="el-icon-arrow-down el-icon--right" :style="fly" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personInfo">个人信息</el-dropdown-item>
            <!-- <el-dropdown-item>基本设置</el-dropdown-item> -->
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <content-list />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUser, getRole } from '@/utils/auth.js'
import jianbian from '@/assets/jianbian.png'
import logo from '@/assets/bytue1.png'
import user from '@/assets/user.png'
import contentList from './component/contentList.vue'
export default {
  name: 'Index',
  components: {
    contentList
  },
  data() {
    return {
      backImg: {
        background: `url(${jianbian})`
      },
      logo: logo,
      user: user,
      fly: {
        transform: 'rotate(180deg)',
        color: 'rgba(67,143,222,1)'
      },
      background: {
        background: 'rgba(67,143,222,0.6)'
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    // 点击头像弹出选项
    appear: function(status) {
      this.fly.transform = status ? 'rotate(0deg)' : 'rotate(180deg)'
      this.fly.color = status ? '#fff' : 'rgba(67,143,222,1)'
      this.background.background = status ? '#4fc08d' : 'rgba(67,143,222,0.6)'
    },
    // 点击下拉选项
    handleCommand: function(command) {
      // 个人信息展示
      if (command === 'personInfo') {
        this.personInfo()
      } else if (command === 'logout') {
        // 退出登录
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' })
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      }
    },
    // 个人信息
    personInfo: function() {
      this.$notify({
        title: '',
        customClass: 'leftPosition',
        dangerouslyUseHTMLString: true,
        /*  <div class="notice">当前用户：<span>${getUserId()}</span></div>
            <div class="notice">所属平台：<span>${getPlatformKey()}</span></div>
            <div class="notice">角色名称：<span>${getRoleKey()}</span></div> */
        message: `
          <div class="userBack">
            <img src="${user}">
          </div>
          <div class="allnote">
            <div class="notice">当前用户：<span>${getUser()}</span></div>
            <div class="notice">角色名称：<span>${getRole()}</span></div>
          </div>
        `,
        offset: 50,
        duration: 0
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.page
  width: 100%
  user-select: none
  height: 100%
  border: 1px solid #000
  background-size:100% 100% !important
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #533ce1), color-stop(100%, #4087ea))
  background: -webkit-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%)
  background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%)
  .backbo
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
    background-size:100% 100% !important
  .head
    height: 10%
    max-height: 65px
    position: relative
    margin: 0 0 10px 0
    box-shadow: 4px 4px 20px rgba(0,0,0,0.4)
    .logo
      margin-top: 10px
      margin-left: 30px
    .title
      display: inline-block
      position: absolute
      left: 100px
      font-weight: bold
      top: 20px
      color: rgba(255,255,255,0.95)
      font-size: 25px
    .user
      // background:rgba(0,0,0,0.2)
      position: absolute
      cursor: pointer
      margin-right: 30px
      right: 0
      top: 0px
      bottom: 0
      padding-top: 12px
      width: 99px
      border-radius: 2px
      &:hover
        background: #66b1ff
      .el-icon--right
        margin-top: 10px
        font-size: 17px
        transition:transform 0.4s ease
        margin-left: 20px
        font-weight: bold
      .userImg
        float: left
        margin-left: 10px
        width: 40px
        height: 40px
      .name
        float: left
        height: 40px
        line-height: 40px
        width: 60px
        font-size: 16px
        & span
          color: red
          display: block
  .content
    width: 100%
    height: 90%
    position: absolute
    top: 10%
    left: 0
    z-index: 100 !important
</style>
<style>
.page{
  overflow: hidden !important
}
.notice{
  margin: 10px 0 0 0
}
.notice span{
  font-weight: bold
}
.userBack{
  width: 120px;
  float: left;
  height: 110px;
  opacity: 0.9;
  /* background: #66b1ff; */
  background: #4087ea;
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #533ce1), color-stop(100%, #4087ea));
  background: -webkit-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%);
  background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%);
}
.allnote{
  margin-top: 20px;
  margin-left: 15px;
}
.userBack img{
  width: 80px;
  height: 80px;
  opacity: 0.9;
  margin-top: 18px;
  margin-left: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.allnote{
  float: left
}
.el-notification{
  padding: 0 !important;
  border: 0;
}
.el-notification__group{
  margin-left: 0 !important;
}
.el-notification__content{
  margin: 0;
}
</style>
